<template>
  <view class="com-container">
    <!-- 全局loading -->
    <view
      v-if="props.type == 1"
      class="loading-layer mz-page-bc-color"
      v-show="!props.ready"
      :class="{ 'loading-hidden': props.ready }"
    >
      <view class="loading-wrap">
        <view class="box">
          <image
            class="pic"
            :lazy-load="true"
            :show-menu-by-longpress="true"
            :src="proxy.$images.loading"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
    <!-- 局部loading -->
    <view
      v-if="props.type == 2"
      class="loading-center"
      v-show="!props.ready"
      :class="{ 'loading-hidden': props.ready }"
    >
      <img class="img-center" :src="proxy.$images.loading" />
      <view v-if="props.loadingText" class="errorText">{{
        props.loadingText
      }}</view>
      <view v-else-if="props.errorText" class="errorText">{{
        props.errorText
      }}</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  type: {
    type: Number,
    default: 1,
  },
  ready: {
    type: Boolean,
    default: false,
  },
  errorText: {
    type: String,
    default: "加载中",
  },
  loadingText: {
    type: String,
    default: "加载中",
  },
});
</script>

<style lang="scss" scoped>
@import url("@/static/css/theme.scss");
/* 全部loading */
.loading-hidden {
  display: none !important;
}
.loading-layer {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: #efefef;
  opacity: 1;
}

.loading-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .box .pic {
    width: 150rpx;
    height: 150rpx;
  }
}

/* 局部loading */
.loading-center {
  width: 260rpx;
  height: 260rpx;
  position: fixed;
  left: 50%;
  top: 45%;
  background: rgba(17, 17, 17, 0.7);
  transform: translate(-50%, -50%);
  z-index: 9999;
  border-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
}

.img-center {
  width: 100rpx;
  height: 100rpx;
}

.errorText {
  color: #fff;
  text-align: center;
  font-size: 24rpx;
  line-height: 40rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
}
</style>
